<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fileinput-basic示例</title>
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../bootstrap.min.css" />
<link rel="stylesheet" href="css/fileinput.min.css"/>
<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap.min.js"></script>
<script type="text/javascript" src="js/fileinput.min.js"></script>
<script type="text/javascript" src="js/locales/zh.js"></script>
</head>
<body>

    <input id="input-b1" name="input-b1" class="file" type="file" data-language="zh" data-browse-on-zone-click="true"
           data-show-preview="true" data-drop-zone-enabled="true" multiple data-show-upload="false" data-show-caption="true"
           data-msg-placeholder="浏览...json,txt,png,jpg,docx,xlsx,zip,pdf" data-browse-icon='<i class="fa fa-edit"></i>'
           data-max-file-count="5" data-allowed-file-extensions='["json","txt","png","jpg","docx","xlsx","zip","pdf"]'
           data-file-action-settings='{"zoomIcon":"<i class=\"fa fa-plus-square\"></i>","indicatorNew":"<i class=\"fa fa-plus-circle text-warning\"></i>"}'
           data-preview-zoom-button-icons='{
                "close":"<i class=\"fa fa-close fa-1g\"></i>",
                "prev":"<i class=\"fa fa-chevron-left fa-1g\"></i>",
                "next": "<i class=\"fa fa-chevron-right fa-1g\"></i>",
                "toggleheader":"<i class=\"fa fa-arrows-v fa-1g\"></i>",
                "fullscreen":"<i class=\"fa fa-arrows-alt fa-1g\"></i>",
                "borderless":"<i class=\"fa fa-arrows fa-1g\"></i>",
                "close":"<i class=\"fa fa-close fa-1g\"></i>"
           }'
           data-max-file-preview-size="512"
    />


    <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col">属性</th><th scope="col">属性说明</th>
        </tr>
        </thead>
        <tbody>
            <tr><td>multiple</td><td>html5-input-file原生属性，是否支持多文件选择</td></tr>
            <tr><td>webkitdirectory</td><td>html5-input-file原生属性，选择文件夹上传</td></tr>
            <tr><td>readonly</td><td>html5-input-file原生属性，只读文件上传组件</td></tr>
            <tr><td>disabled</td><td>html5-input-file原生属性，禁用文件上传组件</td></tr>
            <tr><td>data-language</td><td>语言</td></tr>
            <tr><td>data-browse-on-zone-click</td><td>拖动区域是否支持点击选择文件</td></tr>
            <tr><td>data-drop-zone-enabled</td><td>是否显示拖动选择文件区域</td></tr>
            <tr><td>data-show-preview</td><td>是否显示预览区域</td></tr>
            <tr><td>data-show-upload</td><td>选择文件后是否显示上传按钮</td></tr>
            <tr><td>data-show-caption</td><td>是否显示选择文件的文本框</td></tr>
            <tr><td>data-msg-placeholder</td><td>选择文件的文本框未选文件时的提示</td></tr>
            <tr><td>data-max-file-count</td><td>最大选择文件个数</td></tr>
            <tr><td>data-allowed-file-extensions</td><td>限制文件上传类型后缀</td></tr>
            <tr><td>data-file-action-settings</td><td>选择文件参数设置</td></tr>
            <tr><td>data-preview-zoom-button-icons</td><td>预览文件窗口的图标设置</td></tr>
            <tr><td>data-max-file-preview-size</td><td>预览文件的内容最大限制</td></tr>
        </tbody>
    </table>

</body>
</html>